<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="user-center-mobile">
            <template v-for="(moduleItem,moduleIndex) in moduleList">
              <div :key="moduleIndex">
                <!--顶部标题栏-->
                <template v-if="moduleItem.dataField.key === 'topNavBar' && moduleItem.dataField.isShow">
                  <div :class="{active:currentPanel === 'topNavBar'}" @click="currentPanel = 'topNavBar'" class="pos_r user-center-header">
                      <div class="pos_r ab-mobile-header-top" :style="{
                      backgroundColor:moduleItem.dataField.style === '2' ? moduleItem.dataField.globalBackColor : '#fff',
                      color:moduleItem.dataField.style === '2' && moduleItem.dataField.colorSetting === 1 ? moduleItem.dataField.backColor : moduleItem.dataField.globalContentColor
                      }" :class="{active:moduleItem.dataField.style === '2' && moduleItem.dataField.colorSetting === 1}">
                      <div class="ab-mobile-header-page-name">{{moduleItem.dataField.title}}</div>
                    </div>
                  </div>
                </template>
                <!--顶部图片导航-->
                <template v-if="moduleItem.dataField.key === 'imageMenu' && moduleItem.dataField.isShow && moduleItem.dataField.item && moduleItem.dataField.item.length>0">
                  <div :class="{active:currentPanel === 'imageMenu'}" @click="currentPanel = 'imageMenu'"  class="pos_r user-center-item">
                    <div class="user-center-order">
                      <div class="user-center-image"  v-for="(imageItem,imageIndex) in moduleItem.dataField.item" :key="imageIndex" :style="{backgroundImage: `url(${imageItem.url})`, backgroundSize: contain, height: imageItem.height + 'px',}"></div>
                    </div>
                  </div>
                </template>
                <!--三方应用设置-->
                <template v-if="moduleItem.dataField.key === 'tpApp' && moduleItem.dataField.isShow  && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'tpApp'}" @click="currentPanel = 'tpApp'" class="pos_r user-center-item">
                    <div class="user-center-order">
                      <div class="app-header dis al_item dis_ju_spb">
                        <div style="width:100%;">
                          <el-tabs tab-position="top" >
                            <el-tab-pane v-for="(item, index) in cpTpPermissionGroupList" :key="index" :label="item.name" :name="index" />
                          </el-tabs>
                        </div>
                      </div>
                      <div class="dis al_item order-box">
                        <template v-for="(orderItem,orderIndex) in moduleItem.dataField.item">
                          <div :key="orderIndex" class="flex_1 text-center">
                            <svg class="prev-icon-size" aria-hidden="true">
                              <use :xlink:href=orderItem.icon.url></use>
                            </svg>
                            <div class="app-name-prev">{{ orderItem.title }}</div>
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
                <!--流程任务设置-->
                <template v-if="moduleItem.dataField.key === 'taskFlow' && moduleItem.dataField.isShow && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'taskFlow'}" @click="currentPanel = 'taskFlow'" class="pos_r user-center-item ">
                    <div class="user-center-order">
                      <div class="order-header dis al_item dis_ju_spb">
                        <div>流程任务</div>
                        <span style="color:#00a6f9;font-size: 12px;">查看更多>>></span>
                      </div>
                      <div class="dis al_item task-flow-box">
                        <template v-for="(assetItem,assetIndex) in moduleItem.dataField.item">
                          <div v-if="assetItem.isShow" :key="assetIndex" class="flex_1 text-center">
                            <img  v-for="(imageItem,imageIndex) in moduleItem.dataField.itemShowNum" :key="imageIndex" style="width: 98%;height:45px;}" src="@/assets/cms/task_flow.png" />
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
                <!--单据看板设置-->
                <template v-if="moduleItem.dataField.key === 'billKanban' && moduleItem.dataField.isShow && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'billKanban'}" @click="currentPanel = 'billKanban'" class="pos_r user-center-item ">
                    <div class="user-center-order">
                      <div class="order-header dis al_item dis_ju_spb">
                        <div>单据看板</div>
                        <span style="color:#00a6f9;font-size: 12px;">查看更多>>></span>
                      </div>
                      <div class="dis al_item order-box">
                        <template v-for="(assetItem,assetIndex) in moduleItem.dataField.item">
                          <div v-if="assetItem.isShow" :key="assetIndex" class="flex_1 text-center">
                            <img  v-for="(imageItem,imageIndex) in moduleItem.dataField.itemShowNum" :key="imageIndex" style="width: 98%;height:55px;}" src="@/assets/cms/bill_kanban.png" />
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
            <!-- 右侧设置 -->
          <div class="flex_1 user-right-mobile">
            <div class="user-center-config">
              <div class="user-center-content">
                <div class="panel-items">
                  <draggable :list="moduleList" :move="dragOnMove" handle=".handle" ghost-class="ghost" filter=".forbid">
                    <div v-for="(item,index) in moduleList" :key="index" class="panel-item">
                      <div class="dis al_item dis_ju_spb panel-header">
                        <div class="dis flex_1 al_item">
                          <el-checkbox :disabled="item.dataField.disabled" v-model="item.dataField.isShow"></el-checkbox>
                          <div class="flex_1" @click="handlerClickModule(item)">{{ item.dataField.moduleName }}</div>
                        </div>
                        <div v-if="item.dataField.key !== 'topNavBar'" class="drag-right handle">
                          <img src="@/assets/images/jiantou.png" class="img-box"/>
                          <!-- svg-icon icon-class="drag-right"></svg-icon -->
                        </div>
                      </div>
                      <div v-if="item.dataField.key === currentPanel" class="panel-container">
                        <!--顶部导航栏-->
                        <template v-if="item.dataField.key === 'topNavBar'">
                          <el-form ref="form" :model="item.dataField" label-width="80px">
                            <el-form-item class="person-center-form-item" label="页面名称">
                              <el-input style="width: 320px" show-word-limit size="mini" maxlength="8" v-model="item.dataField.title"
                              ></el-input>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="页面描述">
                              <el-input style="width: 320px"  type="textarea" show-word-limit size="mini" maxlength="24" v-model="item.dataField.desc"></el-input>
                            </el-form-item>
                            <!-- <el-form-item class="person-center-form-item" label="背景颜色">
                              <div class="nav-style person-center-form-item">
                                <el-radio-group v-model="item.dataField.style">
                                  <el-radio label="1">跟随全局</el-radio>
                                  <el-radio label="2">自定义</el-radio>
                                </el-radio-group>
                              </div>
                              <div v-if="item.dataField.style === '1'">顶部色系与
                                <el-button style="font-size: 12px" type="text">店铺风格-顶部色系</el-button>
                                处保持一致
                              </div>
                              <div v-else class="dis al_item">
                                <div>
                                  <div class="bar-title">背景颜色</div>
                                  <div>
                                    <el-color-picker v-model="item.dataField.globalBackColor"></el-color-picker>
                                  </div>
                                </div>
                                <div style="margin-left: 80px">
                                  <div class="bar-title">内容颜色</div>
                                  <div class="dis al_item" style="height: 52px">
                                    <div class="dis al_item dis_ju content-color-item" @click="item.dataField.colorSetting = 1">
                                      <i v-if="item.dataField.colorSetting === 1" class="el-icon-check"></i>
                                    </div>
                                    <div class="dis al_item dis_ju content-color-item ba" @click="item.dataField.colorSetting = 2">
                                      <i v-if="item.dataField.colorSetting === 2" class="el-icon-check"></i>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </el-form-item> -->
                          </el-form>
                        </template>
                        <!--图片导航-->
                        <template v-if="item.dataField.key === 'imageMenu'">
                          <draggable :list="item.dataField.item">
                          <div v-for="(imageItem,imageIndex) in item.dataField.item" :key="imageIndex" class="dis al_item image-menu-container">
                            <i class="el-icon-error" @click="imageClick(index,imageIndex)"></i>
                            <div class="image-menu-image" :style="{backgroundImage:`url(${imageItem.url})`}"  @click="changeImg(index,imageIndex)"></div>
                            <div class="flex_1 image-menu">
                              <div class="dis al_item">
                                <el-input placeholder="请输入图片标题" show-word-limit size="mini" maxlength="12" v-model="imageItem.title"></el-input>
                              </div>
                              <div class="progressBox dis al_item dis_ju_spb">
                                <div>图片高度</div>
                                <div class="flex_1 dis al_item dis_ju_end">
                                  <div class="flex_1 progress">
                                    <el-slider v-model="imageItem.height" :max="200" />
                                  </div>
                                  <div class="inpWrap">{{ imageItem.height }}</div>
                                </div>
                              </div>
                              <div class="dis al_item">
                                <div v-if="imageItem.link.type >= 0&&imageItem.link.title&&imageItem.link.microTitle" class="dis al_item">
                                  <span class="typeName">{{ imageItem.link.microTitle }}</span>
                                  <span class="microTitle">{{ imageItem.link.title }}</span>
                                  <span class="cursor modifyBtn microTitle" @click="choosePage(index,imageIndex)">修改</span>
                                </div>
                                <div v-else class="cursor modifyBtn" @click="choosePage(index,imageIndex,imageItem.link)">请选择跳转路径</div>
                                <!-- <el-button class="image-link-button" type="text">请选择跳转路径</el-button> -->
                              </div>
                            </div>
                          </div>
                          </draggable>
                          <div v-if="item.dataField.item.length<10" class="add-nav-item" @click="handleAddImageMenu(item.dataField.item)">添加图片 <span v-if="item.dataField.item.length>0">({{ item.dataField.item.length }}/10)</span></div>
                        </template>

                        <!--应用设置-->
                        <template v-if="item.dataField.key === 'tpApp'">
                          <div class="text-center">
                            <div class="menu-items">
                              <draggable :list="item.dataField.item">
                               <div class="nav-tabs-menu">
                                 <div style="float: right;">
                                    <el-button type="info" size="mini" @click="addPermissionGroup()">添加分组</el-button>
                                    <el-button type="success" size="mini" @click="addPermissionApp()">添加应用</el-button>
                                 </div>
                               </div>
                               <div style="width: 100%">
                                 <el-tabs v-model="editableTabsIndex" type="card" tab-position="top" class="nav-tabs-edit" closable @tab-click="changeTab"  @tab-remove="removeTab">
                                   <el-tab-pane v-for="(item, index) in cpTpPermissionGroupList" :key="item.id" :label="item.name" :name="index" >
                                     <div  class="pos_r ">
                                       <div class="dis al_item dis_ju ">
                                         <template v-for="(appItem,appIndex) in cpTpPermissionList">
                                           <div :key="appIndex" class="pos_r flex_1 text-center user-center-app" @click="alert('test')">
                                             <svg class="edit-icon-size" aria-hidden="true">
                                               <use :xlink:href=appItem.icon></use>
                                             </svg>
                                             <div class="app-name-edit">{{ appItem.name }}</div>
                                           </div>
                                         </template>>
                                       </div>
                                     </div>
                                   </el-tab-pane>
                                 </el-tabs>
                               </div>
                              </draggable>
                            </div>
                          </div>
                        </template>
                        <!--流程任务设置-->
                        <template v-if="item.dataField.key === 'taskFlow'">
                          <div class="menu-items">
                            <draggable :list="item.dataField.item">
                              <div class="dis al_item dis_ju_spb menu-item">
                                <div class="dis al_item">
                                  <div class="flex_1">显示行数:</div>
                                </div>
                                <div>
                                  <el-input-number style="width:220px; margin-left: 10px; text-align: right;" size="mini" v-model="item.dataField.itemShowNum" controls-position="right" :min="1" :max="10" ></el-input-number>
                                </div>
                              </div>
                            </draggable>
                          </div>
                        </template>
                        <!--单据看板设置-->
                        <template v-if="item.dataField.key === 'billKanban'">
                          <div class="menu-items">
                            <draggable :list="item.dataField.item">
                              <div class="dis al_item dis_ju_spb menu-item">
                                <div class="dis al_item">
                                  <div class="flex_1">显示行数:</div>
                                </div>
                                <div>
                                  <el-input-number style="width:220px; margin-left: 10px;" size="mini" v-model="item.dataField.itemShowNum" controls-position="right" :min="1" :max="10"></el-input-number>
                                </div>
                              </div>
                            </draggable>
                          </div>
                        </template>

                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <div class="wrapper-save">
      <el-button :loading="isSaving" :disabled="isSaving" size="mini"  type="primary"  @click="save">保存</el-button>
    </div>

    <el-dialog title="" :show-close="false" :visible.sync="dialogEdit" width="500px">
      <el-form ref="addMenu" :model="currentItem.info" label-width="80px">
        <el-form-item class="person-center-form-item" label="名称" prop="title" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' },]">
          <el-input show-word-limit size="mini" maxlength="10" v-model="currentItem.info.title"></el-input>
        </el-form-item>
        <el-form-item v-if="currentItem.info.icon" class="person-center-form-item" label="菜单图片">
          <div>
            <el-radio-group v-model="currentItem.info.icon.type">
              <el-radio :label="1">系统图标</el-radio>
              <!-- <el-radio :label="2">自定义图标</el-radio> -->
            </el-radio-group>
          </div>
          <div v-if="isIcon" class="dis al_item dis dis_ju al_item edit-box-icon" @click="ImgClick">
            <el-image  :src="currentItem.info.icon.url" fit="fill" style="width: 48px; height: 48px"></el-image>
          </div>
          <div v-else class="dis al_item dis dis_ju al_item edit-box-icon" @click="iconClick">
            <svg class="icon-size" aria-hidden="true">
              <use :xlink:href=currentItem.info.icon.url></use>
            </svg>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="handlerSave">确 定</el-button>
      </span>
    </el-dialog>

    <chooseImages  ref="pics" :can-choose-images-num="canChooseImagesNum" :max="canChooseImagesNum" @chooseImagesEnd="chooseImagesEnd" @getUrl="getPicsUrl" />

    <!--选择微页面-->
    <div id="dialog">
      <el-dialog title="页面选择" custom-class="up-dialog" :close-on-click-modal="false" top="5vh" :visible.sync="dialogChoosePages" width="42%">
        <div class="choose-goods-compent">
          <choose-feature ref="feature" />
          <div slot="footer" style="text-align: right;margin-top: 20px;">
            <el-button size="mini" type="primary" @click="confirmClick">确定</el-button>
            <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>

    <!-- 选择图标 -->
    <el-dialog title="选择图标" :visible.sync="isDialogIcon" width="50%">
      <iconFont @iconBox="iconBox" v-if="isICon" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogIcon = false">取 消</el-button>
        <el-button type="primary" @click="iconChooseModel">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分组信息 -->
    <el-dialog title="分组信息" :visible.sync="isGroupDialog" width="20%">
      <el-form ref="permissionGroup" :model="permissionGroupParams" label-width="80px">
        <el-form-item label="组名" >
          <el-input show-word-limit size="mini" maxlength="5" v-model="permissionGroupParams.name"></el-input>
        </el-form-item>
        <el-form-item label="顺序号" >
          <el-input-number size="mini" v-model="permissionGroupParams.sort" controls-position="right" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isGroupDialog = false">取 消</el-button>
        <el-button type="primary" @click="savePermissionGroup()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 应用信息 -->
    <el-dialog title="应用信息" :visible.sync="isAppDialog" width="30%">
      <el-form ref="permissionApp" :model="permissionAppParams" label-width="80px">
        <el-form-item label="组名" >
          <el-input show-word-limit size="mini" maxlength="5" v-model="permissionAppParams.name"></el-input>
        </el-form-item>
        <el-form-item label="图标" >
          <el-input size="mini" v-model="permissionAppParams.icon"></el-input>
        </el-form-item>
        <el-form-item label="链接" >
          <el-input size="mini" v-model="permissionAppParams.route"></el-input>
        </el-form-item>
        <el-form-item label="顺序号" >
          <el-input-number size="mini" v-model="permissionAppParams.sort" controls-position="right" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAppDialog = false">取 消</el-button>
        <el-button type="primary" @click="savePermissionApp()">确 定</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
import Index from './index'

export default Index
</script>
<style lang="scss">
.prev-icon-size {
  height: 20px;
  width: 20px;
}
.edit-icon-size {
  height: 40px;
  width: 40px;
}
.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 16px !important;
  }
}

.person-center-form-item {
  font-size: 12px;

  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
  .el-input-number el-input-number__inner {
     text-align: right;
  }
}
.nav-tabs-menu {
  display: inline-flex;
  justify-content: flex-end;
  padding-bottom: 10px;
  width: 100%;
}
.nav-tabs-edit {
   height: 220px;
   border: 1px solid #E3E2E5;
   font-size: 10px;
   .el-tabs__nav .el-tabs__item {
     width: 100px;
     font-size: 10px !important;
   }
}
</style>

<style lang="scss" scoped>
@import "index";
</style>
